`
<template>
    <div class="pet-management">
        <div class="header">
            <h1>宠物档案管理</h1>
            <div class="filters">
                <el-button @click="queryDate(null)">全部</el-button>
                <el-button @click="queryDate('狗')">狗</el-button>
                <el-button @click="queryDate('猫')">猫</el-button>
                <el-button @click="queryDate('兔子')">兔子</el-button>
                <el-button @click="queryDate('鹦鹉')">鹦鹉</el-button>
                <el-button @click="queryDate('仓鼠')">仓鼠</el-button>
                <el-button @click="queryDate('乌龟')">乌龟</el-button>
            </div>
            <div class="search-bar">
                <el-input placeholder="请输入搜索内容" v-model="searchQuery.petName" class="search-input"/>
                <el-button type="primary" @click="getPetList()">筛选</el-button>
            </div>
        </div>
        <div class="pet-list">
            <div class="pet-item" v-for="pet in pets">
                <div style="display: flex">
                    <!-- 如果 pet.imgs 不是空数组，显示图片 -->
                    <div v-if="pet.imgs.length > 0" v-for="url in pet.imgs" style="display: inline-flex">
                        <img :src="url" alt="暂无图片" class="pet-image"/>
                    </div>
                    <!-- 如果 pet.imgs 是空数组，显示默认图片 -->
                    <div v-if="pet.imgs.length === 0">
                        <img src="https://www.yunox.cn/image/pet.jpg" alt="暂无图片" class="pet-image"/>
                    </div>
                </div>

                <div class="pet-info">
                    <div style="display: flex;margin-top: 10px">
                        <div style="flex: 20">{{ pet.petName }}</div>
                        <div style="flex: 2;border-radius: 10px;padding: 1px;text-align:center;background: rgba(171,219,255,0.35);color: #9999ff">
                            {{ pet.gender === 1 ? '母' : '公' }}
                        </div>
                    </div>
                    <div style="margin-top:10px">{{ pet.specis }}</div>
                    <div style="display: flex;margin-top: 10px">
                        <div>
                            <img src=" https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/58406371534/4ae5/80a5/104f/8619825292152685fd898896edc8f28e.png "
                                 style="scale: 0.6;"/>
                        </div>
                        <div>
                            {{ pet.age }}岁
                        </div>

                    </div>
                    <div>疫苗接种：{{ pet.lastVaccinationTime }}</div>
                    <el-button type="text" @click="handleEdit(pet)">查看</el-button>
                </div>
            </div>
        </div>
        <el-dialog v-if="dialogVisible2" v-model="dialogVisible2" title="宠物信息" width="40%">
            <div>
                <el-form :model="petForm" label-width="100px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="宠物名称">
                                <el-input v-model="petForm.petName" placeholder="请输入宠物名称"></el-input>
                            </el-form-item>
                            <el-form-item label="种类">
                                <el-input v-model="petForm.species" placeholder="请输入宠物种类"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄">
                                <el-input v-model="petForm.age" placeholder="请输入宠物年龄"></el-input>
                            </el-form-item>
                            <el-form-item label="体重">
                                <el-input v-model="petForm.weight" placeholder="请输入宠物体重"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select
                                        v-model="petForm.gender"
                                        placeholder="请选择宠物性别"
                                        size="large"
                                >
                                    <el-option
                                            v-for="item in petGenderOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="毛发长度">
                                <el-input v-model="petForm.hairLength" placeholder="请输入宠物毛发长度"></el-input>
                            </el-form-item>
                            <el-form-item label="疫苗接种记录">
                                <el-input v-model="petForm.vaccinationRecords"
                                          placeholder="请输入宠物疫苗接种记录"></el-input>
                            </el-form-item>
                            <el-form-item label="驱虫记录">
                                <el-input v-model="petForm.dewormingRecords"
                                          placeholder="请输入宠物驱虫记录"></el-input>
                            </el-form-item>
                            <el-form-item label="疾病史">
                                <el-input v-model="petForm.medicalHistory" placeholder="请输入宠物疾病史"></el-input>
                            </el-form-item>
                            <el-form-item label="过敏史">
                                <el-input v-model="petForm.allergyHistory" placeholder="请输入宠物过敏史"></el-input>
                            </el-form-item>
                            <el-form-item label="性格特点">
                                <el-input v-model="petForm.personalityTraits"
                                          placeholder="请输入宠物性格特点"></el-input>
                            </el-form-item>
                            <el-form-item label="饮食习惯">
                                <el-input v-model="petForm.dietaryHabits" placeholder="请输入宠物饮食习惯"></el-input>
                            </el-form-item>
                            <el-form-item label="活动习惯">
                                <el-input v-model="petForm.activityPreferences"
                                          placeholder="请输入宠物活动习惯"></el-input>
                            </el-form-item>
                            <el-form-item label="睡眠习惯">
                                <el-input v-model="petForm.sleepHabits" placeholder="请输入宠物睡眠习惯"></el-input>
                            </el-form-item>
                            <el-form-item label="运动习惯">
                                <el-input v-model="petForm.sportHabits" placeholder="请输入宠物运动习惯"></el-input>
                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getPetInfo2} from "@/api/petApi";
import {parseTime2} from "@/utils/timeUtil";

export default {
    data() {
        return {
            petForm: {},
            dialogVisible2: false,
            searchQuery: {
                petName: null,
                specis: null
            },
            petGenderOptions:[
                {label:"公",value:0},
                {label:"母",value:1}
            ],
            pets: [

            ],
        };
    },
    methods: {
        handleEdit(pet) {
            this.petForm = pet
            this.dialogVisible2 = true
        },
        queryDate(specis) {
            this.searchQuery.specis = specis
            this.getPetList()
        },
        getPetList() {
            getPetInfo2(this.searchQuery).then(res => {
                res.data.forEach(v => {
                    if (v.imgs) {
                        v.imgs = v.imgs.split(';')
                    } else {
                        v.imgs = []
                    }
                    v.dateOfBirth = parseTime2(v.dateOfBirth)
                    v.lastVaccinationTime = v.lastVaccinationTime !== null ? parseTime2(v.lastVaccinationTime) : '暂无记录'
                })
                this.pets = res.data
            })
        }
    }, mounted() {
        this.getPetList()
    }
};
</script>

<style scoped>
.pet-management {
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filters {
    display: flex;
    gap: 10px;
}

.search-bar {
    display: flex;
    gap: 10px;
}

.search-input {
    width: 300px;
}

.pet-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pet-item {
    width: calc(25% - 20px);
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pet-image {
    width: 70px;
    height: auto;
}

.pet-info {
    padding: 10px;
}

h2 {
    margin: 0 0 10px;
}

p {
    margin: 0;
    color: #666;
}
</style>`